<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>不良事件-增加</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/font-awesome-4.3.0/css/font-awesome.min.css" />
		<link href="../css/config.css" rel="stylesheet" />
		<link href="../css/base.css" rel="stylesheet" />
		<link href="../css/index.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav km-navbar">
			<a class="mui-icon mui-icon-back mui-pull-left mui-action-back"></a>
			<h1 id="title" class="mui-title km-view-title">不良事件</h1>
		</header>
		<div class="mui-content3 mui-fullscreen mui-scroll-wrapper" style="background:#efefef;">
			<div class="mui-scroll">
				<div class="dl-content-padding">
					<div class="yp-box">
						<label><font color="red">*</font>事件类型</label>
						<div class="input-box">
							<select>
								<option>头晕头痛</option>
								<option>头晕</option>
							</select>
						</div>
					</div>
					<div class="yp-box">
						<label><font color="red"></font>症状描述</label>
						<div class="input-box">
							<input type="text" />
						</div>
					</div>
					<div class="yp-box">
						<label><font color="red">*</font>开始时间</label>
						<div class="input-box">
							<button id='pickDateBtn' type="button" class="mui-btn mui-btn-block datepicker">选择日期</button>
						</div>
					</div>
					<div class="yp-box">
						<label><font color="red">*</font>持续时间</label>
						<div class="yp-li">
							<div class="yp-text-box-1">至今:</div><span class="zt"></span>
							<div class="mui-switch mui-switch-blue mui-active">
								<div class="mui-switch-handle"></div>
							</div>
						</div>
						<div class="split-line hide">
							<span>或</span>
						</div>
						<div class="yp-li hide" id="cx-time">
							<div class="input-box-half">
								<input type="text" placeholder="0" />
							</div>
							<div class="input-box-half">
								<select>
									<option>小时</option>
									<option>分钟</option>
									<option>天</option>
									<option>周</option>
									<option>月</option>
									<option>年</option>
								</select>
							</div>
						</div>
					</div>
					<a class="enter-button-90">保&nbsp;存</a>
				</div>
			</div>

			<script src="../js/mui.min.js"></script>
			<script src="../js/zepto.min.js"></script>
			<script src="../js/Global.js"></script>
			<script src="../js/index.js"></script>
			<script type="text/javascript" charset="utf-8">
				mui.init();
				mui('.mui-scroll-wrapper').scroll();
				//============配置开关
				mui('.yp-box .mui-switch').each(function() { //循环所有toggle
					//toggle.classList.contains('mui-active') 可识别该toggle的开关状态
					this.parentNode.querySelector('span').innerText =  (this.classList.contains('mui-active') ? '是' : '否');
					/**
					 * toggle 事件监听
					 */
					this.addEventListener('toggle', function(event) {
						//event.detail.isActive 可直接获取当前状态
						this.parentNode.querySelector('span').innerText =  (event.detail.isActive ? '是' : '否');
					if(event.detail.isActive){
						
						hideCX();
					}else{
						showCX();
					}
					});
				});
				function hideCX(){
					$(".split-line").addClass('hide');
					$("#cx-time").addClass('hide');
				}
				function showCX(){
					$(".split-line").removeClass('hide');
					$("#cx-time").removeClass('hide');
				}
			</script>
	</body>

</html>